<template>
    <div style="width: 100%">
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="tableData"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   ref="crud"
                   :page.sync="page">
            <template slot="nameCn" slot-scope="{row}">
                <span class="column-btn" @click="showDetail(row)">{{ row.nameCn }}</span>
            </template>
            <template slot="menu" slot-scope="{row,index}">
                <el-button type="text" :disabled="index === 0 && method ==='history'" @click="stMain(row)">{{
                    `设为${method === "history" ? "主" : "生效"}版本`
                    }}
                </el-button>
                <el-button type="text" @click="del(row)">删除</el-button>
            </template>
        </avue-crud>

        <el-dialog :close-on-click-modal="false"
                   :visible.sync="visible"
                   title="预览页面"
                   width="60%"
                   :modal-append-to-body="false">
            <div class="body_" v-if="visible">
                <v-form-render :formJson="json" :previewState="true"></v-form-render>
            </div>
            <div slot="footer">
                <el-button size="medium" @click="visible=false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as api from "@/api/applicationManage/applicationManage"
import VFormRender from "@/components/form-render/index.vue";

export default {
    name: "pageHistoryTemp",
    components: {VFormRender},
    data() {
        return {
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            tableData: [],
            selection: [],
            loading: false,
            option: {
                height: "auto",
                calcHeight: 30,
                dialogWidth: 900,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: false,
                labelWidth: 120,
                menuWidth: 180,
                viewBtn: false,
                dialogClickModal: false,
                tabs: true,
                delBtn: false,
                addBtn: false,
                editBtn: false,
                refreshBtn: false,
                columnBtn: false,
                header: false,
                align: "center",
                column: [],
                column_history: [
                    {
                        label: "中文名称",
                        prop: "nameCn",
                        slot: true
                    },
                    {
                        label: "英文名称",
                        prop: "nameEn",
                    },
                    {
                        label: "版本",
                        prop: "version",
                    },
                    {
                        label: "更新时间",
                        prop: "modifyTime",
                        width: 150
                    },
                ],
                column_publish: [
                    {
                        label: "中文名称",
                        prop: "nameCn",
                        slot: true
                    },
                    {
                        label: "英文名称",
                        prop: "nameEn",
                    },
                    {
                        label: "生效版本",
                        prop: "active",
                        dicData: [
                            {label: "是", value: 1},
                            {label: "否", value: 0}
                        ]
                    },
                    {
                        label: "版本",
                        prop: "version",
                    },
                    {
                        label: "更新时间",
                        prop: "modifyTime",
                        width: 150
                    },
                ],
            },

            row: {},

            visible: false,
            json: {}
        }
    },
    computed: {
        method() {
            return this.row.type === "version" ? "history" : "publish"
        }
    },
    methods: {
        setOption() {
            let opt = this.deepCopy(this.option);
            opt.column = this.method === "history" ? this.option.column_history : this.option.column_publish;
            this.option = opt;
        },

        showDetail(row) {
            this.json = JSON.parse(row.json);
            this.visible = true;
        },
        stMain(row) {
            this.$confirm(this.method === "history" ? "是否设为主版本" : "是否设为活动版本").then(() => {
                api[this.method + "_setMain"]({id: row.oid}).then(() => {
                    this.$message.success("设置成功");
                    this.getPage();
                    this.$emit('refresh');
                })
            })
        },
        del(row) {
            this.$confirm("是否删除").then(() => {
                api[this.method + "_del"]({id: row.oid}).then(() => {
                    this.$message.success("删除成功");
                    this.getPage();
                })
            })
        },

        getPage() {
            api[this.method + "_page"](this.page.currentPage, this.page.pageSize, {applicationPageId: this.row.oid}).then(res => {
                const {totalRows, list} = res.data.data;
                this.tableData = list;
                this.page.total = totalRows;
            })
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
            this.getPage();

        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.getPage();
        },
        show(row) {
            this.row = row;
            this.setOption();
            this.getPage();
        }
    },
}
</script>

<style lang="scss" scoped>
.body_ {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>
